<template>
  <div class="detail_wrap">
    <div class="flex mb10 flex_h_between">
      <div class="info_text cursor" @click="back"><a-icon type="left" />返回</div>
    </div>
    <div class="activity_title">{{ detail.name }}</div>
    <div class="activity_tip">照片出自：{{detail.author}}&nbsp;&nbsp;&nbsp;&nbsp;来源：小航家公益教育服务平台&nbsp;&nbsp;&nbsp;&nbsp;日期：{{moment(detail.dateCreated).format('YYYY-MM-DD HH:mm:ss')}}</div>
    <!-- <div v-html="detail.content" class="detail_content"></div> -->
    <img style="width: 100%;" :src="'/sysFile/fileShow?url=' + (detail.filePath && detail.filePath.replaceAll('\\', '/'))" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import moment from 'moment'
import { picDetail } from '@/api/config'
export default {
  name: 'imgsDetail',
  components: { },
  data () {
    return {
      moment,
      detail: {}
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  watch: {
  },
  async mounted () {
    await this.getDetail()
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    async getDetail () {
      let res = await picDetail({ id: this.$route.query.id })
      if (res.code === 200) {
        this.detail = res.data
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styles/var.styl'
.detail_wrap
  padding 20px 30px
  background #fff
  min-height calc(100vh - 107px)
  .activity_title
    text-align: center;
    font-weight: 600;
    color: #000;
    font-size: 20px;
    margin-bottom: 20px;
    padding-top: 20px;
  .activity_tip
    font-size: 14px;
    color: #666;
    padding-bottom: 20px
    border-bottom: 1px solid #e5e5e5;
</style>
